<template>
  <div>
    <el-dialog
      v-model="show"
      :title="title"
      width="500"
      draggable
      destroy-on-close
      @close="reset"
    >
      <div>
        <el-form
          :model="formData"
          label-width="auto"
          style="max-width: 600px"
          :rules="rules"
          ref="ruleForm"
          :mode="ruleModel"
        >
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="formData.title" maxlength="13" />
          </el-form-item>
          <el-form-item label="商品折扣">
            <el-input-number
              v-model="formData.discount"
              :precision="2"
              :step="0.01"
              style="width: 200px"
              :max="1"
              :min="0.0"
            />
          </el-form-item>
          <el-form-item label="价格">
            <el-input-number
              v-model="formData.price"
              :precision="2"
              :min="0.0"
              style="width: 200px"
            >
              <template #prefix>
                <span>￥</span>
              </template>
            </el-input-number>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number
              v-model="formData.sort"
              :min="1"
              :max="999"
              style="width: 200px"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              ref="upload"
              :before-upload="onBeforeUpload"
            >
              <img v-if="avatar.url" :src="avatar.url" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="类型">
            <el-radio-group v-model="formData.type">
              <el-radio value="1">会员商品</el-radio>
              <el-radio value="2">其他商品</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="持续时间" v-if="formData.type === '1'">
            <el-input-number
              v-model="formData.date"
              :min="1"
              :max="99"
              style="width: 200px"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="时间单位" v-if="formData.type === '1'">
            <el-radio-group v-model="formData.dateUnit">
              <el-radio value="1">天</el-radio>
              <el-radio value="2">月</el-radio>
              <el-radio value="0">年</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="formData.marketable">
              <el-radio value="0">下架</el-radio>
              <el-radio value="1">上架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input
              v-model="formData.desc"
              type="textarea"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="loading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineExpose, ref, defineEmits } from "vue";
import { Plus } from "@element-plus/icons-vue";

const avatar = ref({
  file: null,
  url: "",
});
const emits = defineEmits(["common", "upload"]);
const show = ref(false);
const title = ref("添加用户");
const loading = ref(false);
const type = ref(false);
const disabled = ref(false);
const upload = ref();
const ruleForm = ref();
const rules = ref({
  title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
});

const formData = ref({
  id: null,
  title: "",
  desc: "",
  price: 0.0,
  discount: 0.0,
  sort: 1,
  marketable: "0",
  imgUrl: "",
  type: "1",
  date: 1,
  dateUnit: "2",
  flag: 1,
});

const onBeforeUpload = (file) => {
  avatar.value.url = URL.createObjectURL(file);
  avatar.value.file = file;
  disabled.value = false;
  return false;
};

const open = (item, type1) => {
  show.value = true;
  title.value = type1;
  if ("修改商品" === type1) {
    formData.value.title = item.title;
    formData.value.id = item.id;
    formData.value.price = item.price;
    formData.value.discount = item.discount;
    formData.value.sort = item.sort;
    formData.value.imgUrl = item.imgUrl;
    formData.value.desc = item.desc;
    formData.value.marketable = item.marketable == 0 ? "0" : "1";
    formData.value.flag = 0;
    formData.value.type = item.type.toString();
    formData.value.date = item.date;
    formData.value.dateUnit =
      item?.dateUnit !== null ? item?.dateUnit.toString() : "2";
    avatar.value.url = item.imgUrl;
    type.value = true;
  }
};

const ruleModel = ref({
  title: "",
});

const onSubmit = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      emits("upload", avatar.value.file);
      emits("common", formData.value);
      setTimeout(() => {
        reset();
        loading.value = false;
      }, 1000);
    }
  });
};

const reset = () => {
  formData.value = {
    id: null,
    title: "",
    desc: "",
    price: 0.0,
    discount: 0.0,
    sort: 1,
    marketable: "0",
    imgUrl: "",
    type: 1,
    date: 1,
    dateUnit: "2",
    flag: 1,
  };

  avatar.value = {
    file: null,
    url: "",
  };
  type.value = false;
  show.value = false;
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.avatar {
  width: 140px;
  height: 140px;
}
</style>
